<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main authorize-bd">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="title" />
        <div class="options">
          <!--          <el-dropdown style="margin-right: 8px">
            <el-button plain>
              {{$t('authorize.operation')}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleCheck('checkAll')">
                {{$t('authorize.checkAll')}}</el-dropdown-item>
              <el-dropdown-item @click.native="handleCheck('cancelCheckAll')">
                {{$t('authorize.deselectAll')}}
              </el-dropdown-item>
              <el-dropdown-item @click.native="setAllExpand('open')">{{$t('authorize.expandAll')}}
              </el-dropdown-item>
              <el-dropdown-item @click.native="setAllExpand('close')">{{$t('authorize.foldAll')}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <!--    <el-button :disabled="active <= 0 || treeLoading" @click="handlePrevStep">
            {{$t('common.prev')}}
          </el-button>
          <el-button :disabled="active >= 4 || treeLoading" @click="handleNextStep">
            {{$t('common.next')}}
          </el-button> -->
          <!-- <el-button type="primary" :loading="btnLoading" @click="handleConfirm()">{{$t('common.confirmButton')}}</el-button> -->
          <el-button @click="goBack">{{ $t("common.cancelButton") }}</el-button>
        </div>
      </div>
      <el-tabs v-model="active" type="card" @tab-click="handleClick">
        <el-tab-pane
          :label="$t('authorize.menuPermission')"
          name="0"
        ></el-tab-pane>
        <el-tab-pane
          :label="$t('authorize.buttonPermission')"
          name="1"
        ></el-tab-pane>
        <el-tab-pane
          :label="$t('authorize.listPermission')"
          name="2"
        ></el-tab-pane>
        <el-tab-pane
          :label="$t('authorize.formPermission')"
          name="3"
        ></el-tab-pane>
        <el-tab-pane
          :label="$t('authorize.dataPermission')"
          name="4"
        ></el-tab-pane>
        <el-tab-pane :label="$t('authorize.userList')" name="5"></el-tab-pane>
      </el-tabs>
      <!--  <el-steps :active="active" finish-status="success" simple>
        <el-step :title="$t('authorize.menuPermission')"></el-step>
        <el-step :title="$t('authorize.buttonPermission')"></el-step>
        <el-step :title="$t('authorize.listPermission')"></el-step>
        <el-step :title="$t('authorize.formPermission')"></el-step>
        <el-step :title="$t('authorize.dataPermission')"></el-step>
      </el-steps> -->
      <div class="main">
        <el-form
          ref="dataForm"
          :model="dataForm"
          @keyup.enter.native="handleConfirm()"
        >
          <el-form-item>
            <!-- <el-tree :data="authorizeTreeData" ref="authorizeTree" v-loading="treeLoading"
              default-expand-all node-key="id" :check-strictly="checkStrictly" check-on-click-node :props="defaultProps"
              :expand-on-click-node="false" @check-change="selectTreeNodeClick">
              <div slot-scope="{ node, data }">
                <i :class="data.icon" />
                <span style="padding-left: 4px;">{{ node.label }}</span>
              </div>
            </el-tree> -->
            <el-tabs
              v-model="menuType"
              type="card"
              @tab-click="handleClickMenu"
            >
              <el-tab-pane label="PC菜单" name="web">
                <el-tree
                  :data="authorizeTreeData"
                  ref="authorizeTree"
                  v-loading="treeLoading"
                  default-expand-all
                  node-key="id"
                  :check-strictly="checkStrictly"
                  check-on-click-node
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @check-change="selectTreeNodeClick"
                >
                  <div slot-scope="{ node, data }">
                    <i :class="data.icon" />
                    <span style="padding-left: 4px">{{ node.label }}</span>
                  </div>
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="APP菜单" name="app">
                <el-tree
                  :data="authorizeTreeDataApp"
                  ref="authorizeTreeApp"
                  v-loading="treeLoading"
                  default-expand-all
                  node-key="id"
                  :check-strictly="checkStrictly"
                  check-on-click-node
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @check-change="selectTreeNodeClick"
                >
                  <div slot-scope="{ node, data }">
                    <i :class="data.icon" />
                    <span style="padding-left: 4px">{{ node.label }}</span>
                  </div>
                </el-tree>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </transition>
</template>

<script>
import {
  getAuthorizeValues,
  getRoleAuthorizeValues,
  updateAuthorizeList,
} from "@/api/permission/authorize";

export default {
  data() {
    return {
      visible: false,
      treeLoading: false,
      btnLoading: false,
      checkStrictly: true,
      activeName: "0",
      objectId: "",
      dataForm: {
        objectType: "",
        module: [],
        button: [],
        column: [],
        form: [],
        resource: [],
      },
      params: {
        type: "module",
        moduleIds: "",
      },
      title: "",
      active: "0",
      authorizeTreeData: [],
      authorizeTreeDataApp: [],
      moduleAuthorizeTree: [],
      buttonAuthorizeTree: [],
      columnAuthorizeTree: [],
      formAuthorizeTree: [],
      resourceAuthorizeTree: [],
      userListAuthorizeTree: [],
      moduleAllData: [],
      buttonAllData: [],
      columnAllData: [],
      formAllData: [],
      resourceAllData: [],
      userListAllData: [],
      moduleIdsTemp: [],
      defaultProps: {
        // 配置项（必选）
        value: "id",
        label: "fullName",
        children: "children",
      },
      menuType: "web",
    };
  },
  methods: {
    init(id, fullName, type) {
      Object.assign(this.$data, this.$options.data());
      this.visible = true;
      this.objectId = id;
      this.dataForm.objectType = type;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (type === "User") {
          this.title = this.$t(`user.userPermission`) + " - " + fullName;
        } else if (type === "Position") {
          this.title = this.$t(`position.postPermission`) + "- " + fullName;
        } else if (type === "Role") {
          this.title = this.$t(`role.rolePermission`) + " - " + fullName;
        }
        this.getAuthorizeList();
      });
    },
    // 筛选出web菜单
    getMenuPc(data) {
      if (!data) return;
      return data.filter((item) => item.fullName == "荣科智行");
    },
    // 筛选出App菜单
    getMenuApp(data) {
      if (!data) return;
      return data.filter((item) => item.fullName != "荣科智行");
    },
    handleClickMenu(e) {
      this.menuType = e.name;
    },
    getAuthorizeList() {
      this.treeLoading = true;
      this.authorizeTreeData = [];
      this.authorizeTreeDataApp = [];
      console.log(this.active);
      console.log(this.objectId);
      console.log(this.params);

      getRoleAuthorizeValues(this.objectId, this.params)
        .then((res) => {
          switch (this.active) {
            case "0":
              console.log("获取菜单");
              this.moduleAuthorizeTree = res.data.list;
              this.moduleAllData = res.data.all;
              // this.authorizeTreeData = this.moduleAuthorizeTree
              this.authorizeTreeData = this.getMenuPc(res.data.list);
              this.authorizeTreeDataApp = this.getMenuApp(res.data.list);
              const moduleIds = [...this.moduleIdsTemp, ...res.data.ids];
              this.dataForm.module = [...new Set(moduleIds)];
              this.moduleIdsTemp = this.dataForm.module;
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.module);
              this.$refs.authorizeTreeApp.setCheckedKeys(this.dataForm.module);
              break;
            case "1":
              console.log("获取按钮");
              this.buttonAuthorizeTree = res.data.list;
              this.buttonAllData = res.data.all;
              // this.authorizeTreeData = this.buttonAuthorizeTree
              this.authorizeTreeData = this.getMenuPc(res.data.list);
              this.authorizeTreeDataApp = this.getMenuApp(res.data.list);
              this.dataForm.button = [
                ...this.dataForm.button,
                ...res.data.ids,
                ...this.moduleIdsTemp,
              ];
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.button);
              this.$refs.authorizeTreeApp.setCheckedKeys(this.dataForm.button);
              break;
            case "2":
              console.log("获取列表");
              this.columnAuthorizeTree = res.data.list;
              this.columnAllData = res.data.all;
              // this.authorizeTreeData = this.columnAuthorizeTree
              this.authorizeTreeData = this.getMenuPc(res.data.list);
              this.authorizeTreeDataApp = this.getMenuApp(res.data.list);
              this.dataForm.column = [
                ...this.dataForm.column,
                ...res.data.ids,
                ...this.moduleIdsTemp,
              ];
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.column);
              this.$refs.authorizeTreeApp.setCheckedKeys(this.dataForm.column);
              break;
            case "3":
              console.log("获取表单");
              this.formAuthorizeTree = res.data.list;
              this.formAllData = res.data.all;
              // this.authorizeTreeData = this.formAuthorizeTree
              this.authorizeTreeData = this.getMenuPc(res.data.list);
              this.authorizeTreeDataApp = this.getMenuApp(res.data.list);
              this.dataForm.form = [
                ...this.dataForm.form,
                ...res.data.ids,
                ...this.moduleIdsTemp,
              ];
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.form);
              this.$refs.authorizeTreeApp.setCheckedKeys(this.dataForm.form);
              break;
            case "4":
              console.log("获取数据");
              this.resourceAuthorizeTree = res.data.list;
              this.resourceAllData = res.data.all;
              // this.authorizeTreeData = this.resourceAuthorizeTree
              this.authorizeTreeData = this.getMenuPc(res.data.list);
              this.authorizeTreeDataApp = this.getMenuApp(res.data.list);
              this.dataForm.resource = [
                ...this.dataForm.resource,
                ...res.data.ids,
                ...this.moduleIdsTemp,
              ];
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.resource);
              this.$refs.authorizeTreeApp.setCheckedKeys(
                this.dataForm.resource
              );
              break;
            case "5":
              console.log("获取角色下人员列表信息");
              this.userListAuthorizeTree = res.data.list;
              this.userListAllData = res.data.all;
              // this.authorizeTreeData = this.userListAuthorizeTree
              this.authorizeTreeData = this.getMenuPc(res.data.list);
              this.authorizeTreeDataApp = this.getMenuApp(res.data.list);
              this.dataForm.resource = [
                ...this.dataForm.resource,
                ...res.data.ids,
                ...this.moduleIdsTemp,
              ];
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.resource);
              this.$refs.authorizeTreeApp.setCheckedKeys(
                this.dataForm.resource
              );
              break;
          }

          this.checkStrictly = false;
          this.treeLoading = false;
        })
        .catch(() => {
          this.treeLoading = false;
        });
    },
    goBack() {
      this.$emit("close");
    },
    // 全选/全不选
    handleCheck(val) {
      if (val === "checkAll") {
        switch (this.active) {
          case "0":
            this.$refs.authorizeTree.setCheckedKeys(this.moduleAllData);
            this.$refs.authorizeTreeApp.setCheckedKeys(this.moduleAllData);
            break;
          case "1":
            this.$refs.authorizeTree.setCheckedKeys(this.buttonAllData);
            this.$refs.authorizeTreeApp.setCheckedKeys(this.buttonAllData);
            break;
          case "2":
            this.$refs.authorizeTree.setCheckedKeys(this.columnAllData);
            this.$refs.authorizeTreeApp.setCheckedKeys(this.columnAllData);
            break;
          case "3":
            this.$refs.authorizeTree.setCheckedKeys(this.formAllData);
            this.$refs.authorizeTreeApp.setCheckedKeys(this.formAllData);
            break;
          case "4":
            this.$refs.authorizeTree.setCheckedKeys(this.resourceAllData);
            this.$refs.authorizeTreeApp.setCheckedKeys(this.resourceAllData);
            break;
        }
      }
      if (val === "cancelCheckAll") {
        this.$refs.authorizeTree.setCheckedKeys([]);
        this.$refs.authorizeTreeApp.setCheckedKeys([]);
      }
    },
    // 折叠 展开
    setAllExpand(state) {
      let result, resultApp;
      if (state === "open") {
        result = true;
        resultApp = true;
      }
      if (state === "close") {
        result = false;
        resultApp = false;
      }
      const nodes = this.$refs.authorizeTree.store.nodesMap;
      for (let i in nodes) {
        nodes[i].expanded = result;
      }
      const nodesApp = this.$refs.authorizeTreeApp.store.nodesMap;
      for (let i in nodesApp) {
        nodesApp[i].expanded = resultApp;
      }
    },
    // 上一步
    handlePrevStep() {
      this.active -= 1;
      this.menuType = "web";
      this.handelInitData();
    },
    // 下一步
    handleNextStep() {
      if (this.active++ > 4) this.active = 0;
      this.handelInitData();
      this.menuType = "web";
    },
    // 切换主题标签
    handleClick(tab, event) {
      this.menuType = "web";
      this.handelInitData();
    },
    handelInitData() {
      this.checkStrictly = true;
      this.treeLoading = true;
      switch (this.active) {
        case "0":
          this.params.type = "module";
          break;
        case "1":
          this.params.type = "button";
          this.params.moduleIds = this.moduleIdsTemp.toString();
          break;
        case "2":
          this.params.type = "column";
          this.params.moduleIds = this.moduleIdsTemp.toString();
          break;
        case "3":
          this.params.type = "form";
          this.params.moduleIds = this.moduleIdsTemp.toString();
          break;
        case "4":
          this.params.type = "resource";
          this.params.moduleIds = this.moduleIdsTemp.toString();
          break;
        case "5":
          this.params.type = "userList";
          this.params.moduleIds = this.moduleIdsTemp.toString();
          break;
      }
      this.getAuthorizeList();
    },
    // 设置数据
    selectTreeNodeClick() {
      const parentIds = this.$refs.authorizeTree.getHalfCheckedKeys();
      const parentIdsApp = this.$refs.authorizeTreeApp.getHalfCheckedKeys();
      const childrenIds = this.$refs.authorizeTree.getCheckedKeys();
      const childrenIdsApp = this.$refs.authorizeTreeApp.getCheckedKeys();
      const newIds = [
        ...parentIds,
        ...childrenIds,
        ...parentIdsApp,
        ...childrenIdsApp,
      ];
      const dataIds = [...new Set(newIds)];
      switch (this.active) {
        case "0":
          this.dataForm.module = dataIds;
          this.moduleIdsTemp = this.dataForm.module;
          break;
        case "1":
          this.dataForm.button = dataIds;
          break;
        case "2":
          this.dataForm.column = dataIds;
          break;
        case "3":
          this.dataForm.form = dataIds;
          break;
        case "4":
          this.dataForm.resource = dataIds;
          break;
      }
    },
    handleConfirm() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;

          updateAuthorizeList(this.objectId, this.dataForm)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.btnLoading = false;
                  this.$emit("close", true);
                },
              });
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.authorize-bd {
  common-page-header {
    border-bottom: none;
  }

  .el-steps {
    border-radius: 0;
  }
}

.main {
  padding: 20px;
}
</style>
